<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>教室页面</title>

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


    <script type="text/javascript" src="/resources/jquery/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="/resources/layui/css/layui.css">
    <script type="text/javascript" src="/resources/layui/layui.js"></script>

    <link rel="stylesheet" href="/resources/layui/css/style.css">

    <script type="text/javascript" src="/resources/js/vip/vip_comm.js"></script>

    <script>
        layui.use('layer', function () {
            var layer = layui.layer;
            $ = layui.jquery
        });
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#test1,#test2,#editClazzOpenTime,#editClazzColseTime' //指定元素
                , type: 'time'
            });
        });
        layui.use('form', function () {
            var form = layui.form;
            form.render();
        });


    </script>


    <script type="text/javascript">
        // function clickThis(flag) {
        //     // var a = document.getElementById(id);
        //     if (!flag) {
        //         // a.setAttribute("href", "javascript:;");
        //         layer.msg('该教室暂未开放');
        //
        //      /*   var checkUsernameResult = document.getElementById(id + '*');
        //
        //         checkUsernameResult.innerText = "该教室暂未开放";*/
        //     }
        // }
    </script>

</head>
<body>

<c:forEach var="item" items="${clazzList}">

    <div style="width: 200px;display: inline-block; margin-bottom: 100px;margin-right: 50px; overflow: hidden">
        <%--<a href=${item.status?"/frontSeat?clazzName=".concat(item.clazzName):"javascript:;"} target="this_iframe" id="${item.id}" onclick="clickThis(${item.status})">--%>
        <a href=${item.status?"/frontSeat?clazzName=".concat(item.clazzName):"javascript:;"} target="this_iframe" id="${item.id}" onclick="if(!${item.status}){layer.msg('该教室暂未开放');}">
            <%--<img src="/resources/images/library.jpg" width="100%" height="100%" onload="onloaded(${item.id})">--%>
                <img src="/resources/images/library.jpg" width="100%" height="100%">
        </a>

        <span id="${item.id}*" style="color: red "></span>
        <p>教室名：${item.clazzName}</p>
        <p>已占座/座位总数：${item.useSeats}/${item.seatCounts}</p>


        <form class="layui-form">
            <div class="layui-form-item" style="text-align: center">
                <div class="layui-input-block ">
                    <input type="checkbox" name="status" value="${item.status}"
                           class="status" id="${item.id}00" lay-skin="switch" lay-text="开馆|闭馆" disabled="disabled" ${item.status?"checked":""}
                    >
                </div>
            </div>
        </form>


    </div>
</c:forEach>




<script>



    // window.onload=function (ev) {
    //     function onloaded(id) {
    //
    //         //alert(id);
    //         var a = document.getElementById(id + '00');
    //         // alert(a.value);
    //         var b = a.id;
    //
    //         if (a.value.toString()=='true') {
    //             // alert('true');
    //             $("#"+b).attr("checked", true);
    //
    //         } else {
    //             $("#"+b).attr("checked", false);
    //         }
    //     }
    // }
</script>


</body>
</html>
